{extend name="common/common" /}
{block name="style"}
<style media="screen">
	.curForm .el-input__inner{
		width: 217px;
	}
</style>
{/block}
{block name="content"}
<el-col :lg="12">
	<div class="ibox-title">
		<h5>职员角色</h5>
	</div>
	<div class="ibox-content">
		<el-form label-width="80px" :inline="true" :model="form" :rules="rules" ref="form" class="curForm">
			<el-form-item label="角色名称" prop="role_name">
				<el-input v-model="form.role_name" placeholder="请输入角色名称"></el-input>
			</el-form-item>
			<br>
			<el-form-item label="所属部门" prop="department">
				<el-input v-model="form.department" readonly placeholder="请选择所属部门"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="info" plain @click="selectDepart">选择</el-button>
			</el-form-item><br>
			<el-form-item label="平台角色" prop="platform_role_id">
				<el-select v-model="form.platform_role_id" placeholder="请选择">
					<el-option label="超级管理员" value="1"></el-option>
					<el-option label="州（市）主管用户" value="2"></el-option>
					<el-option label="州（市）服务商用户" value="3"></el-option>
					<el-option label="县（市/区）主管用户" value="4"></el-option>
					<el-option label="县（市/区）服务商用户" value="5"></el-option>
					<el-option label="乡（镇）主管用户" value="6"></el-option>
					<el-option label="乡（镇）服务商用户" value="7"></el-option>
					<el-option label="村（居）主管用户" value="8"></el-option>
					<el-option label="村（居）服务商用户" value="9"></el-option>
					<el-option label="企业用户" value="10"></el-option>
					<el-option label="电商扶贫示范用户" value="11"></el-option>
					<el-option label="建档立卡扶贫示范用户" value="12"></el-option>
				</el-select>
			</el-form-item><br>
			<el-form-item label=" ">
				<el-button type="primary" plain @click="subForm('form')">保存</el-button>
			</el-form-item>
			<el-input type="hidden" v-model="form.department_id"></el-input>
		</el-form>
	</div>
</el-col>
{/block}
{block name="component"}
<div id="deparTreeBox">
	<el-dialog title="选择部门" :visible.sync="showDeparTree" top="5vh">
		<div class="treeBox">
			<el-tree
				:data="deparTreeData"
				:props="props"
				ref="deparTree"
				show-checkbox
				node-key="id"
				:default-expanded-keys="exkeys"
				check-strictly="true"
				@check-change="toRadio">
			</el-tree>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showDeparTree = false">取消</el-button>
			<el-button type="success" @click="sureDepart">保存</el-button>
		</div>
	</el-dialog>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data() {
		return {
			loading:false,
			form:{
				id:"{$role.id}",
				role_name:'{$role.role_name}',
				department:'{$role.department_name}',
				department_id:'{$role.department_id}',
				platform_role_id:"{$role.platform_role_id}"
			},
			rules:{
				role_name:[{required:true,message:'请输入角色名称',trigger:['blur','change']}],
				department:[{required:true,message:'请选择所属部门',trigger:['blur','change']}],
				platform_role_id:[{required:true,message:'请选择平台角色',trigger:['blur','change']}],
			}
		}
	},
	methods:{
		selectDepart() {
			deparTree.showDeparTree = true;
			$.getJSON("{:url('department/index')}",function(res){
				deparTree.deparTreeData = res.data;
				deparTree.exkeys = res.exkeys;
			})
		},
		subForm(form){
			this.$refs[form].validate((valid) => {
				if (valid) {
					var param = this.form;
					$.post("./roleEdit",param,function(res){
						if(res.code == 1){
							main.$confirm(res.msg, '成功', {
								confirmButtonText: '确定',
								showClose:false,
								type: 'success',
								showCancelButton:false
							}).then(() => {
								window.location.href = res.data;
							});
						}else{
							main.$notify.error({
								title: '错误',
								message: res.msg
							});
						}
					})
				}
        	});
		}
	}
});
var deparTree = new Vue({
	el:"#deparTreeBox",
	data() {
		return {
			showDeparTree:false,
			deparTreeData:'',
			checkedTimes:0,
			props:{
				label:"name"
			},
			exkeys:[],
		}
	},
	methods:{
		sureDepart() {
			this.showDeparTree = false;
			if(this.$refs.deparTree.getCheckedKeys().length == 0){
				main.form.department_id = 0;
				main.form.department = '';
				return false;
			}
			main.form.department_id = this.$refs.deparTree.getCheckedKeys()[0];
			main.form.department = this.$refs.deparTree.getCheckedNodes()[0].name;
		},
		toRadio(data,checked, node) {
			this.checkedTimes++;
			if(this.checkedTimes%2==0){
			   if(checked){
				   this.$refs.deparTree.setCheckedNodes([]);
				   this.$refs.deparTree.setCheckedNodes([data]);
			   }else{
				   this.$refs.deparTree.setCheckedNodes([]);
			   }
			}
		}
	}
})
</script>
{/block}
